<template>
  <div class="dashboard">
    <el-row :gutter="20" class="dashboard-card-row">
      <el-col :span="6">
        <el-card shadow="hover" class="dashboard-card">
          <div class="card-icon"><i class="el-icon-user"></i></div>
          <div class="card-content">
            <div class="card-title">员工总数</div>
            <div class="card-value">{{ stats.total_employees || 0 }}</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="dashboard-card">
          <div class="card-icon"><i class="el-icon-office-building"></i></div>
          <div class="card-content">
            <div class="card-title">部门数量</div>
            <div class="card-value">{{ stats.department_count || 0 }}</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="dashboard-card">
          <div class="card-icon"><i class="el-icon-money"></i></div>
          <div class="card-content">
            <div class="card-title">本月总薪资</div>
            <div class="card-value">¥ {{ (stats.monthly_salary_total || 0).toLocaleString() }}</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="dashboard-card">
          <div class="card-icon"><i class="el-icon-time"></i></div>
          <div class="card-content">
            <div class="card-title">待发放薪资</div>
            <div class="card-value">{{ stats.pending_salary_count || 0 }}</div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="dashboard-chart-row">
      <el-col :span="12">
        <el-card shadow="hover">
          <div slot="header" class="clearfix">
            <span>部门员工分布</span>
          </div>
          <div id="department-chart" style="width: 100%; height: 300px;"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="hover">
          <div slot="header" class="clearfix">
            <span>近六个月薪资趋势</span>
          </div>
          <div id="salary-trend-chart" style="width: 100%; height: 300px;"></div>
        </el-card>
      </el-col>
    </el-row>

    <el-row class="dashboard-table-row">
      <el-col :span="24">
        <el-card shadow="hover">
          <div slot="header" class="clearfix">
            <span>最新薪资记录</span>
          </div>
          <el-table :data="recentSalaries" style="width: 100%">
            <el-table-column prop="employee_name" label="员工姓名" width="120"></el-table-column>
            <el-table-column prop="department_name" label="部门" width="120"></el-table-column>
            <el-table-column prop="year" label="年份" width="80"></el-table-column>
            <el-table-column prop="month" label="月份" width="80"></el-table-column>
            <el-table-column prop="total_salary" label="实发工资" width="120">
              <template slot-scope="scope">
                ¥ {{ scope.row.total_salary.toLocaleString() }}
              </template>
            </el-table-column>
            <el-table-column prop="status" label="状态" width="100">
              <template slot-scope="scope">
                <el-tag :type="scope.row.status === '已发放' ? 'success' : 'warning'">
                  {{ scope.row.status }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="payment_date" label="发放日期" width="120">
              <template slot-scope="scope">
                {{ scope.row.payment_date || '-' }}
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import axios from 'axios';
import * as echarts from 'echarts';

export default {
  name: 'Dashboard',
  data() {
    return {
      stats: {},
      departmentData: [],
      salaryTrends: [],
      recentSalaries: [],
    };
  },
  mounted() {
    this.fetchDashboardData();
  },
  methods: {
    async fetchDashboardData() {
      try {
        const statsResponse = await axios.get('/api/dashboard/stats/');
        this.stats = statsResponse.data;

        const deptDistResponse = await axios.get('/api/dashboard/department-distribution/');
        this.departmentData = deptDistResponse.data;
        this.initDepartmentChart();

        const salaryTrendResponse = await axios.get('/api/dashboard/salary-trend/');
        this.salaryTrends = salaryTrendResponse.data;
        this.initSalaryTrendChart();

        const recentSalariesResponse = await axios.get('/api/dashboard/recent-salaries/');
        this.recentSalaries = recentSalariesResponse.data;
      } catch (error) {
        this.$message.error(error.response?.data?.error || '获取仪表盘数据失败');
      }
    },
    initDepartmentChart() {
      const chartDom = document.getElementById('department-chart');
      const myChart = echarts.init(chartDom);
      const option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)',
        },
        legend: {
          orient: 'vertical',
          left: 'left',
        },
        series: [
          {
            name: '部门员工分布',
            type: 'pie',
            radius: '50%',
            data: this.departmentData.map(item => ({ value: item.count, name: item.department_name })),
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          },
        ],
      };
      myChart.setOption(option);
      window.addEventListener('resize', () => myChart.resize());
    },
    initSalaryTrendChart() {
      const chartDom = document.getElementById('salary-trend-chart');
      const myChart = echarts.init(chartDom);
      const option = {
        tooltip: {
          trigger: 'axis',
        },
        xAxis: {
          type: 'category',
          data: this.salaryTrends.map(item => item.month),
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            name: '总薪资',
            type: 'line',
            data: this.salaryTrends.map(item => item.total_salary),
            smooth: true,
          },
        ],
      };
      myChart.setOption(option);
      window.addEventListener('resize', () => myChart.resize());
    },
  },
};
</script>

<style scoped>
.dashboard {
  padding: 20px;
}

.dashboard-card-row {
  margin-bottom: 20px;
}

.dashboard-card {
  display: flex;
  align-items: center;
  padding: 15px;
}

.card-icon {
  font-size: 40px;
  color: #409EFF;
  margin-right: 15px;
}

.card-content .card-title {
  font-size: 14px;
  color: #909399;
  margin-bottom: 5px;
}

.card-content .card-value {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
}

.dashboard-chart-row {
  margin-bottom: 20px;
}

.dashboard-table-row {
  margin-bottom: 20px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}
</style>